{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="/static_media/css/user/create_outcrop.css">
{% endblock style %}

{% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var orangeIcon = {
				url:"/static_media/images/pin_orange.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			var blueIcon = {
				url:"/static_media/images/pin_blue.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			var greenIcon = {
				url:"/static_media/images/pin_green.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			
			var smallShadow = {
				url:"http://labs.google.com/ridefinder/images/mm_20_shadow.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51),
				scaledSize: new google.maps.Size(34, 55)
			}
			
			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng(54.6, -2.46),
			  zoom: 5,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var eMap = new google.maps.Map(document.getElementById("existingMap"), mapOptions);
			
			var positionArray = new Array();
			var markerArray = new Array();
			var titleArray = new Array();
			var keyArray = new Array();
			
			{% for outcrop in outcrop_list %}
			positionArray.push( new google.maps.LatLng({{outcrop.outcrop.latitude}}, {{outcrop.outcrop.longitude}}));
			titleArray.push("{{outcrop.outcrop.name}}");
			keyArray.push({{outcrop.outcrop.pk}});
			{% endfor %}
			
			for (i=0; i<positionArray.length; i++)
			{
				markerArray.push( new google.maps.Marker({
					position: positionArray[i],
					map: eMap,
					title: titleArray[i],
					clickable:true,
					pk:keyArray[i],
					icon:orangeIcon,
					shadow:smallShadow})
				);
					
				google.maps.event.addListener(markerArray[i], 'click', function(event) {
					document.getElementById("id_key").value=this.pk;
					unSelectAll()
					this.setIcon(blueIcon);
				});
			}
			
			function unSelectAll() {
				for (var j=0; j < markerArray.length; j++)
				{
					markerArray[j].setIcon(orangeIcon)
				}
			}
			
			//Create new outcrop map
			
			var mapOptions2 = {
			  //center map on the UK
			  center: new google.maps.LatLng(54.6, -2.46),
			  zoom: 5,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			
			var map = new google.maps.Map(document.getElementById("map"), mapOptions2);
			
			google.maps.event.addListener(map, 'click', function(event) {
				document.getElementById("id_latitude").value=event.latLng.lat();
				document.getElementById("id_longitude").value=event.latLng.lng();
				placeMarker(event.latLng);
			});
											
			var marker = new google.maps.Marker({position: null, map: map, icon:greenIcon });
			
			function placeMarker(location) {
				marker.setPosition(location);
			}
		}
    </script>
{% endblock script %}

{% block content %}
       <!-- .left -->
      <div class="left">
		<div id="accordionMenu" class="accordion">
				<style type="text/css">
		.accordion #one:target .heading + .menuContent {
			height:{{height}}px;
		}
		</style>
				<div id="one" class="section">
					<div class ="heading"> <a href="#one">My Excursions</a> </div>
					<div class="menuContent">
						<ul>
							{% for excursion in my_excursions %}
							<li> <a href="/user/excursion/{{ excursion.pk }}/ ">{{ excursion.name }}</a> </li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div id="two" class="section">
					<div class ="heading"> <a href="#two">My Images</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/images/">My Images</a> </li>
						</ul>
					</div>
				</div>
				<div id="three" class="section">
					<div class ="heading"> <a href="#three">Create</a> </div>
					<div class="menuContent">
						<ul>
							<li> <a href="/user/new_excursion/">Excursion</a> </li>
						</ul>
					</div>
				</div>
			</div>
      </div>
      <!-- end .left -->
      
      <!-- .right -->
      <div class="right">
     		<div class="item">
            	<div class="itemHeading">
                	Use an Existing Outcrop
                </div>
              	<form action="/user/excursion/{{excursionItem.pk }}/link_outcrop/" method="post" class="formItem"> {% csrf_token %}
                  	<div class="fieldError"> {{ existingForm.non_field_errors }} </div>
					<div id="existingMap"></div>
                    {{ existingForm.key.as_hidden }}
					<input type="submit" value="Add Outcrop" id="addButton" class="button"/>		
            	</form>
		    </div>    		   
      
      
      		<div class="item">
            	<div class="itemHeading">
                	Create A New Outcrop
                </div>
              	<form action="/user/excursion/{{excursionItem.pk }}/add_outcrop/" method="post" class="formItem"> {% csrf_token %}
                  	<div class="fieldError"> {{ newForm.non_field_errors }} </div>
                    <div class="fieldError"> {{ state }} </div>
                   	<label for="id_name" class="fieldHeading" >Outcrop Name</label>
                    <div class="fieldError"> {{ newForm.name.errors }} </div>
                    <div class="fieldWrapper"> {{ newForm.name }} </div>

                    <label for="id_description" class="fieldHeading" >Outcrop Description</label>
                    <div class="fieldError"> {{ newForm.description.errors }} </div>
                    <div class="fieldWrapper"> {{ newForm.description }} </div>
                    
					<div class="fieldError"> {{ mapError }} </div>
					<div id="map"></div>
                    {{ newForm.longitude.as_hidden }}
                    {{ newForm.latitude.as_hidden }}
					<input type="submit" value="  Create  " id="createButton" class="button"/>		
            	</form>
		    </div>    		   
      </div>
      <!-- end .right -->
{% endblock content %}
